<template>
  <div class="comp-new">
    <el-form ref="newForm" :model="newForm" label-width="100px">
      <el-form-item
        label="选择账号："
        prop="accountname"
        :rules="[{ required: true, message: '请选择名称', trigger: 'change' }]"
      >
        <el-select
          v-model="newForm.accountname"
          placeholder="请选择"
          clearable
          @change="changeAccount"
        >
          <el-option
            :label="item.accountname"
            :value="item.accountname"
            v-for="(item, index) in userList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="姓名："
        prop="name"
        :rules="[{ required: true, message: '请输入姓名', trigger: 'change' }]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="职务："
        prop="post"
        :rules="[{ required: true, message: '请输入职务', trigger: 'change' }]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.post"></el-input>
      </el-form-item>
      <el-form-item label="办公电话：">
        <el-input placeholder="请输入" v-model.trim="newForm.tel"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号码："
        prop="phone"
        :rules="[
          { required: true, message: '请输入手机号码', trigger: 'change' },
        ]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="照片：">
        <el-upload
          class="avatar-uploader"
          :action="config.uploadUrl"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          accept="image/*"
          :disabled="!$store.getters.hasEditPermission"
          :data="{ token: siteInfos.token }"
        >
          <img v-if="newForm.img" :src="newForm.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "DocNew",
  props: {
    activeData: {
      type: Object,
      default() {
        return null;
      },
    },
    typeList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
  },
  watch: {
    activeData() {
      this.initForm();
    },
  },
  data() {
    return {
      newForm: {},
      userList: [],
    };
  },
  methods: {
    initForm() {
      if (this.activeData) {
        this.newForm = this.utils.pick(this.activeData, [
          "id",
          "name",
          "accountname",
          "userId",
          "post",
          "tel",
          "phone",
          "img",
        ]);
      } else {
        this.newForm = {};
        if (this.$refs["newForm"]) {
          this.$refs["newForm"].resetFields();
        }
      }
    },
    getUserList() {
      this.$get("/systemsetup/systemsetup/userList").then(
        (res) => {
          this.userList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    changeAccount(accountname) {
      let activeUser = this.userList.filter((item) => {
        return item.accountname == accountname;
      })[0];
      this.newForm.userId = activeUser.id;
    },
    handleUploadSuccess(res, file) {
      this.$set(this.newForm, "img", res.data.filePath);
    },
    handleRemove(file, fileList) {
      this.newForm.img = "";
    },
    submitAction() {
      this.$refs["newForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitting");
          let params = Object.assign({}, this.newForm);
          let url = "";
          if (params.id) {
            url = "/check/dutyPerson/dutyPersonUpdate";
          } else {
            url = "/check/dutyPerson/dutyPersonAdd";
          }
          this.$ajax({
            url: url,
            method: "post",
            data: params,
          }).then(
            (data) => {
              this.$emit("success", data);
              this.$message.success("保存成功");
            },
            (error) => {
              this.$emit("fail");
              this.$message.error(error.msg);
            }
          );
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.initForm();
    this.getUserList();
  },
};
</script>
